<template>
  <!-- 搜索的模块 -->
    <div class="search">
        <el-select
        v-model="searchText"
        filterable
        remote
        reserve-keyword
        clearable
        @fous="handelSearchInputFocus"
        @change="searchChange"
        :remote-method="handleSearch"
        placeholder="输入查找信息"
        loading-text="加载中..."
        no-match-text="无匹配数据"
        no-data-text="无数据"
        default-first-option
        :loading="searchLoading"
      >
        <el-option
          v-for="item in searchOptions"
          :key="item"
          :value="item"
        />
      </el-select>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addStu">添加</el-button>
    </div>
    <!-- 导出excel的模块 -->
    <div class="export-excel">
      <el-button @click="handleExport">
          <template #icon>
              <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-daochuexcel"></use>
              </svg>
          </template>
          <template #default>
             导出excel
          </template>
        
      </el-button>
    </div>
    <!-- 表格的模块 -->
    <div class="dataTable">
      <el-table :data="stuList" border style="width: 100%" 
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(122,122,122,0.5)"
      v-loading="stutTableLoading">
        <el-table-column prop="headimgurl" label="头像" width="180"  align="center">
          <template #default="{row,$index}">
           <el-image
              style="width: 100px; height: 100px"
              :src="previewImgList[$index]"
              :zoom-rate="1.2"
              :preview-src-list="previewImgList"
              :initial-index="$index"
              fit="cover"
            /> 
          </template>        
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"  align="center"/>
        <el-table-column prop="class" label="班级"  align="center"/>
        <el-table-column prop="degree" label="学历"  align="center"/>
        <el-table-column prop="productUrl" label="项目"  align="center"/>
        <el-table-column prop="cTime" label="创建时间"  align="center"/>
        <el-table-column prop="address" label="操作" align="center">
          <template #default="{row}">
            <el-button v-has:read="permissionsButton" type="success" @click="view(row)">查看</el-button>
            <el-button v-has:edit="permissionsButton" type="primary" @click="editStu(row)">编辑</el-button>
            <el-button v-has:delete="permissionsButton" type="danger" @click="delStu(row)">删除</el-button>
          </template>
          
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页的模块 -->
    <div class="pagenation">
      <el-pagination background layout="prev, pager, next" 
      @current-change="handlePangeSizeChange"
      hide-on-single-page
      :current-page="fetchTableListParam.page"
      :page-size="fetchTableListParam.count" 
      :total="total" />
    </div>
    <!-- dialog弹窗 -->
    <s-dialog
    @ok="handleDialogOk"
    @cancel="handleDialogCancel"
    :reviewData="reviewData"
    :action="dialogAction"
    :title="dialogTitle"
    v-model="dialogVisible"></s-dialog>
    
</template>
<script setup>
import { ref,onMounted,watch,reactive} from 'vue'
// 引入dialog组件
import  sDialog from "@/components/sDialog/index.vue"
// 引入搜索数据的方法
import * as api from "@/api/stu"
// 引入导出excel的方法
import qee from "qf-export-excel"
// 引入store中的数据
import useUser from "@/store/users.js"
import { ElMessage,ElMessageBox} from 'element-plus'
// 引入路由
import { useRouter } from 'vue-router'
// 使用路由
const router = useRouter()
// 使用store
const  userStore = useUser()
// 声明一个用于标识是否搜索的变量
let isSearch = false
// 封装一个搜索的方法 用于搜索的时候触发
let searchList = async (key = "",isSelect = false,param={page:1,count:5}) => {
  isSearch = true;
  // 打开表格的加载动画
  isSelect && (stutTableLoading.value = true) 
  
  // 打开加载动画
  searchLoading.value = true
  try {
    // 发起的请求 获取学员信息
    let res = await api.searchStuApi({ key,page:param.page,count:param.count })
    // 修改分页的taoal
    isSelect && (total.value = res.data.total) 
    // console.log(res);
    // 对searchOptions中的数据，进行去重赋值
    searchOptions.value =  Array.from(new Set(res.data.data.map(item=>item.name)))
    // console.log(searchOptions.value);
    // 关闭加载动画
    searchLoading.value = false
    // 确认搜索完成 更新表格数据
    isSelect && (stuList.value = res.data.data) && (stutTableLoading.value = false)
  } catch (e) {
    console.log(e);
     // 关闭加载动画
     searchLoading.value = false
  }
}
// 搜索确定内容的时候触发的方法
let searchChange = (val) => {
  // 如果val是空 那就不是搜索状态
  if(!val){
    // 将控制分页的参数重新变成第一页
    fetchTableListParam.page = 1
    isSearch = false
    // 获取全部的数据
    getStuList(fetchTableListParam)
  }else{
    // 搜索的时将控制分页的参数重新变成第一页
    fetchTableListParam.page = 1
    // 如果val不是空 就调用搜索的方法
    searchList(val,true,{page:fetchTableListParam.page,count:fetchTableListParam.count})

  }
}
// 声明搜索的关键字
let searchText = ref("")
// 触发的远程的搜索方法
let handleSearch = (input) => {
  // 调用封装的请求方法
  input && searchList(input)
}
// 搜索框的聚焦事件,清除之前搜索的数据
let handelSearchInputFocus = () => {
  searchOptions.value = []
}
// 搜索加载提示
let searchLoading = ref(false)

// selec的选项数据
const searchOptions = ref([])

// 导出excel的方法
// 定义表头
let titleList = [
  { title: "头像", key: "headimgurl"},
  { title: "姓名", key: "name" },
  { title: "班级", key: "class" },
  { title: "学历", key: "degree" },
  { title: "项目", key: "productUrl" },
  { title: "创建时间", key: "cTime" },
]
let handleExport = ()=>{
  qee(titleList,stuList.value,"学员信息表")
}

// ---------------华丽的分割线----------------
// 表格模块
// 定义表格加载动画的状态
let stutTableLoading = ref(false)
// 声明表格param对象
let fetchTableListParam = reactive({
  page: 1,
  count: 5,
  class: ""
})

// 封装一个获取表格数据的方法

let getStuList = async (param=fetchTableListParam) => {
  // 打开加载动画 
  stutTableLoading.value = true
  try{
    // 发起请求
    let res = await api.getStuListApi(param)
    // 对表格进行赋值
    stuList.value = res.data.data
    // 对分页的total进行赋值
    total.value = res.data.total
    // 关闭加载动画
    stutTableLoading.value = false
  }catch(e){
    console.log(e);
    stutTableLoading.value = false
  }
}
// 声明表格响应式对象
const stuList = ref([])
// 声明预览图片的列表
let previewImgList = ref([])
// 监听表格数据的变化，更新预览图片的列表
watch(stuList,(newVal)=>{
  previewImgList.value = newVal.map(item=>item.headimgurl ? item.headimgurl : "https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png")
})


// ---------------华丽的分割线----------------
// 分页模块
// 分页的参数对象
let total = ref(10)
// 声明一个页码发生变化的处理函数
let handlePangeSizeChange = (page)=>{
  // console.log(value);
  fetchTableListParam.page=page
  // 如果是搜索状态，显示搜索结果的分页数据
  if(isSearch){
    searchList(searchText.value,true,{page:fetchTableListParam.page,count:fetchTableListParam.count})
  }else{

    // 需要重新获取表格数据
    getStuList(fetchTableListParam)
  }
}

// 在组件加载后调用获取表格数据的方法
onMounted(()=>{
  getStuList(fetchTableListParam)
})

// -------------------华丽的分割线

// 声明一个自定义指令
// 从store中获取权限数据
// 取出用户的权限
const permissionsButton = userStore.permission.value.buttons
let vHas = {
  mounted(el,binding){
    // console.log(permissionsButton);
    //判断用户是否传值 是否是一个数组
   if(binding.value && Array.isArray(binding.value)){
      // 判断用户是否有权限 没有权限就删除这个元素  
      if(!binding.value.includes(binding.arg)){
        el.parentNode.removeChild(el)
      }
   }
  }
}


// 声明控制dialog的显示隐藏的变量
let dialogVisible = ref(false)

// 声明dialog的标题
let dialogTitle = ref("添加学员信息")

// 声明dialog的操作类型
let dialogAction = ref("add")

// 表格的增删改查的逻辑
// 表格的添加逻辑
let addStu = ()=>{
  // 打开dialog
  dialogVisible.value = true;
  dialogAction.value='add'
  dialogTitle.value="添加学员信息"
}
// 声明数据回显的响应式变量

let reviewData = ref()
// 表格的查看逻辑
let view = (row)=>{
  userStore.studentInfo.value = {...row}
  console.log(userStore.studentInfo);
  router.push("profile")
}
// 表格的编辑逻辑
let editStu = (row)=>{
  dialogAction.value="edit"
  dialogTitle.value="编辑学员信息"
  dialogVisible.value = true
  // 将当前行的数据回显给reviewData
  reviewData.value= {...row}
}
// 表格的删除逻辑
let delStu = async (row)=>{
  ElMessageBox.confirm(
    `是否删除 ${row.name} 的信息?`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {
      // 发起请求，删除数据
      await api.delStuApi(row.sId)
      // 删除完成 更新列表数据
      getStuList()
      ElMessage({
        type: 'success',
        message: `${row.name}:的信息已删除`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消删除',
      })
    })
}
// 声明dialog通过emit触发的ok和cancel方法
let handleDialogOk = async input=>{
  // console.log(input);
  // 发起请求，将修改后的数据传给后台
  try{
    if(dialogAction.value==='add'){
      await api.addStuApi(input)
      ElMessage.success("添加成功")
    }else if(dialogAction.value==='edit'){
      // console.log(input);
      await api.editStuApi(input)
      ElMessage.success("修改成功")
    }
    // 更新表格数据
    getStuList()
  }catch(e){
    console.log(e);
  }
}
// 点击取消触发的函数
let handleDialogCancel = ()=>{
  ElMessage.error("取消操作")
}

</script>






<style scoped>
 .search .el-select :deep(.el-input__wrapper){
    width: 200px;
  }
  .el-main .export-excel{
    float: right;
}
</style>